<html>
  <head>
    <style></style>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <style>
      html, body {
        margin: 0; padding: 0;
        background: #f0f0f088;
      }
      #mount {
        margin-top: 50px;
        margin-left: 60px;
      }
      #mount canvas {
        border-right: 1px solid #aaaaaa40;
        border-bottom: 1px solid #aaaaaa40;
        background-image:
        linear-gradient(#aaaaaa40 1px, transparent 0),
        linear-gradient(90deg, #aaaaaa40 1px, transparent 0),
        linear-gradient(#aaa 1px, transparent 0),
        linear-gradient(90deg, #aaa 1px, transparent 0);
        background-size: 10px 10px, 10px 10px, 50px 50px, 50px 50px;
        background-color: #ffffff;
      }
    </style>
  </head>
  <body>

    <div id="mount"></div>

    <div>
      <span>scale</span>
      <input id="scale" type="number" value="1"/>
    </div>
    <div>
      <span>scrollX</span>
      <input id="scrollX" type="number" value="0"/>
    </div>
    <div>
      <span>scrollY</span>
      <input id="scrollY" type="number" value="0"/>
    </div>

    <div>
      <select id="cursor">
        <option value="auto">auto</option>
        <option value="move">move</option>
        <option value="grab">grab</option>
        <option value="n-resize">n-resize</option>
        <option value="e-resize">e-resize</option>
        <option value="s-resize">s-resize</option>
        <option value="w-resize">w-resize</option>
        <option value="ne-resize">ne-resize</option>
        <option value="nw-resize">nw-resize</option>
        <option value="se-resize">se-resize</option>
        <option value="sw-resize">sw-resize</option>
      </select>

      <button id="reset-cursor">Reset cursor</button>
    </div>

    <script src="../../../packages/board/dist/index.global.js"></script>
    <script type="module" src="./main.js"></script>
    <script>
      // console.log(parent.window.location);
      // parent.document.addEventListener('click', (e) => {
      //   console.log('xxxxxxx: ', e);
      // })
    </script>
  </body>
</html>